<template>
  <div class="item-order-details">

    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(temp, index) in list_binner" :key="index" class="swiper-item">
        <van-image width="100%" height="300" class="item-cover" :src="temp" fit="cover" />
      </van-swipe-item>
    </van-swipe>

    <div class="order-details-info">
      <div class="money">￥{{ value_product.min_price }} - {{ value_product.max_price }}</div>
      <div class="title">{{ value_product.product_name }}</div>
      <div class="describe" v-html="value_product.recommendation" />
      <div class="sales">已售：{{ value_product.sales_volume }}</div>
    </div>

    <div class="order-chiose">
      <div @click="show=true">
        <span>已选</span>
        <span class="spec">{{ now_check }}</span>
      </div>
      <div>></div>
    </div>

    <div class="order-details">
      <div class="title">产品详情</div>
      <div v-html="value_product.product_details" />
      <img :src="value_product.thumb">
    </div>

    <van-goods-action>
      <van-goods-action-icon icon="cart-o" text="购物车" info="5" />
      <van-goods-action-button color="#F9C023" type="warning" text="加入购物车" @click="show=true" />
      <van-goods-action-button color="#D63A54" type="danger" text="立即购买" @click="show=true" />
    </van-goods-action>

    <van-sku v-if="show_sku" v-model="show" :sku="sku" :goods="goods" :close-on-click-overlay="true" :disable-stepper-input="true" @sku-selected="skuSelectedHandler" @add-cart="addCartHandler" @buy-clicked="buyClickedHandler" @stepper-change="stepperChangeHandler" />

  </div>
</template>

<script>
// api
import { productDetails, productSpecification } from '@/api/miva'
export default {
  data() {
    return {
      goods_info: { num: 1 },
      submitData: { goods_info: [], goods_total: 0 },
      value_product: {},
      list_binner: [],
      show: false,
      show_sku: false,
      now_check: '',
      sku: {
        tree: [{ k: '规格', v: [], k_s: 's1' }],
        list: [],
        price: '',
        stock_num: 0
      },
      goods: {
        picture: '' // 默认商品 sku 缩略图
      }
    }
  },
  async mounted() {
    // 获取商品id
    await this.getProductID()
    // 获取商品详情
    await this.getProductInfo()
    // 获取商品规格
    await this.getProductSpecification()
  },
  methods: {
    // 获取商品id
    async getProductID() {
      const { id = false } = this.$route.params
      if (!id) {
        return this.$router.back()
      }
      this.goods_info.product_id = id
    },
    // 获取商品详情
    async getProductInfo() {
      if (!this.goods_info.product_id) return
      const res_data = await productDetails({ id: this.goods_info.product_id })
      // 装入商品信息
      this.value_product = res_data.data
      // 暴力装入商品信息
      Object.assign(this.goods_info, res_data.data)
      // 写入商品大图轮播
      this.list_binner = res_data.data.img
      console.log(this.list_binner)
    },
    // 获取商品规格
    async getProductSpecification() {
      if (!this.goods_info.product_id) return
      const { data } = await productSpecification({
        id: this.goods_info.product_id
      })
      const reset_tree = []
      const reset_list = []
      let stock_num = 0
      for (const val of data) {
        // 组装tree
        reset_tree.push({ id: val.specification_id, name: val.specification })
        // 组装reset_list
        reset_list.push({
          id: val.specification_id,
          price: val.money * 100,
          s1: val.specification_id,
          stock_num: val.inventory
        })
        stock_num += val.inventory
      }
      this.sku.tree[0].v = reset_tree
      this.sku.list = reset_list
      // 组装价格
      this.sku.price = `${this.value_product.min_price} - ${this.value_product.max_price}`
      // 计算库存
      this.sku.stock_num = stock_num
      // 设置picker内商品封面
      this.goods.picture = this.value_product.thumb
      // 显示picker
      this.show_sku = true
    },
    skuSelectedHandler(data) {
      console.log('切换了规格', data)
      // 商品信息中装入 规格id
      this.goods_info.specification_id = data.skuValue.id
      // 装入规格名称
      this.goods_info.specification_name = data.skuValue.name
      // 装入规格价格
      this.goods_info.specification_price =
        Number(data.selectedSkuComb.price) / 100
      // 更改已选择规格的文字显示
      this.now_check = data.skuValue.name
    },
    stepperChangeHandler(num) {
      this.goods_info.num = num
    },
    addCartHandler(evt) {
      console.log('点击了加入购物车按钮', evt)
    },
    async buyClickedHandler(evt) {
      this.submitData.goods_info.push(this.goods_info)
      this.submitData.goods_total =
        (this.goods_info.num * evt.selectedSkuComb.price) / 100
      // 把订单信息存入vuex
      await this.$store.dispatch('miva/saveOredr', this.submitData)
      // 跳转到提交订单页面
      this.$router.push({ name: 'submitOrder' })
    }
  }
}
</script>

<style lang="less">
.item-order-details {
  background: #f5f6f8;
  .order-details-info {
    padding: 10px;
    background: #fff;
    position: relative;
    margin-bottom: 10px;
    .money {
      color: #d63a54;
      font-size: 18px;
      font-weight: bold;
      padding: 3px 0;
    }
    .title {
      font-size: 16px;
      color: #000;
      font-weight: bold;
      padding: 3px 0;
    }
    .describe {
      color: #999999;
    }
    .sales {
      position: absolute;
      right: 20px;
      top: 20px;
      font-size: 14px;
      color: #999;
    }
  }
  .order-chiose {
    background: #fff;
    padding: 10px;
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
    span {
      color: #999;
    }
    .spec {
      color: #d63a54;
      padding-left: 10px;
    }
    div {
      color: #999;
    }
  }
  .order-details {
    background: #fff;
    padding: 10px 0;
    padding-bottom: 50px;
    .title {
      padding: 10px 0;
      text-align: center;
      color: #333333;
      border-bottom: 1px solid #e5e5e5;
    }
    img {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
    }
  }
  .van-goods-action-button--first {
    margin-left: 5px;
    margin-right: 10px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .van-goods-action-button--last {
    margin-right: 5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
</style>
